<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中食链-找回密码</title>
</head>
<body>
    ~ this is forget pwd ~
    <form id="form-data" method="post">
        <input type="text" th:name="phone" th:id="phone" placeholder="请输入手机号"><br/>
        <input type="text" th:name="imgCode" th:id="imgCode" placeholder="请输入验证码" >
        <img id="imgValidateCode" alt="validate" class="login-img" onclick="changeCode()" th:src="@{/validate/imageCode}"><br/>
        <button type="button" id="form-submit">提交</button><br/>
    </form>

    <form id="form-phone" th:action="@{/forget/forgetPwdSecond}" method="post">
        <input type="hidden" id="hiddenPhone" name="phone" />
    </form>
    <div class="error_msg" th:text="${msg}"></div>
<script th:src="@{/js/jquery.min.js}" ></script>
<script>

    var basePath = [[@{/}]];

    // 更换图片验证码
    function changeCode(){
        $("#imgValidateCode").attr("src", basePath + "validate/imageCode?t=" + new Date().getTime());
    }

    $(function(){
        $("#form-submit").on("click", function () {
            var phone = $.trim($("#phone").val());
            var imgCode = $.trim($("#imgCode").val());

            if (phone.length == 0) {
                $(".error_msg").html("请输入手机号");
                return;
            }

            if (imgCode.length == 0) {
                $(".error_msg").html("请输入验证码");
                return;
            }

            $.ajax({
                url: basePath + '/forget/securityVerification',
                data: $("#form-data").serialize(),
                dataType: "json",
                type: 'POST',
                success: function(data) {
                    if (data.success) {
                        $("#hiddenPhone").val(data.data.phone);
                        $("#form-phone").submit();
                    } else {
                        $("#imgCode").attr("src", basePath + "validate/imageCode?t=" + new Date().getTime())
                        $(".error_msg").html(data.message);
                    }
                }
            });
        })
    });



</script>
</body>
</html>